<template>
  <div class="charts" ref="charts">
      
  </div>
</template>
<script>
import *as echarts from 'echarts'
export default {
    mounted() {
        //初始化echarts实例
        let lineCharts = echarts.init(this.$refs.charts);
        //配置数据
        lineCharts.setOption({
            xAxis:{
                //隐藏x轴
                show: false,
                type: "category",//让点分散
            },
            yAxis:{
                //隐藏y轴
                 show: false,
            },
            //系列
            series:[
                {
                    type:'line',
                    data:[10, 7, 33, 12, 48, 9,29,10,44],
                     //拐点的样式的设置
                    itemStyle: {
                        opacity: 0,
                    },
                    //线条的样式
                    lineStyle: {
                        color: "purple",
                    },
                    //填充颜色设置
                    areaStyle: {
                        color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                            offset: 0,
                            color: "purple", // 0% 处的颜色
                            },
                            {
                            offset: 1,
                            color: "#fff", // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                        },
                    },
                    
                }
            ],
            //布局调试
            grid:{
                left:0,
                top:0,
                right:0,
                bottom:0
            }
        })
    },
}
</script>

<style>
.charts{
    height: 100%;
    width: 100%;
}
</style>